<template>
  <div>
    <el-form ref="formRef" :model="formValue" label-position="top">
      <div
        class="supervision-box"
        v-for="(obj, objIndex) in formValue.group"
        :key="objIndex"
      >
        <div class="supervisionDialogTitle">
          <div class="blueBox"></div>
          {{ title + (objIndex + 1) }}
          <el-button
            type="danger"
            @click="deleteFun(objIndex)"
            style="float: right"
            :icon="Delete"
            link
            >删除</el-button
          >
        </div>
        <el-row :gutter="20">
          <template v-for="(item, index) in formConfig" :key="index">
            <!-- 输入框 -->
            <el-col :span="8" v-if="item.type === 'input'">
              <el-form-item
                :label="item.label"
                :prop="'group.' + objIndex + '.' + item.prop"
                :rules="item.rules || []"
              >
                <el-input
                  v-model="obj[item.prop]"
                  :placeholder="item.placeholder || ''"
                />
              </el-form-item>
            </el-col>
            <!-- 下拉选择器 -->
            <el-col :span="8" v-if="item.type === 'select'">
              <el-form-item
                :label="item.label"
                :prop="'group.' + objIndex + '.' + item.prop"
                :rules="item.rules || []"
              >
                <el-select
                  v-model="obj[item.prop]"
                  :placeholder="item.placeholder || ''"
                  style="width: 100%"
                >
                  <el-option
                    v-for="itemopt in item.options"
                    :key="itemopt.value"
                    :label="itemopt.label"
                    :value="itemopt.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 时间选择器 -->
            <el-col :span="8" v-if="item.type === 'datePicker'">
              <el-form-item
                :label="item.label"
                :prop="'group.' + objIndex + '.' + item.prop"
                :rules="item.rules || []"
              >
                <el-date-picker
                  v-model="obj[item.prop]"
                  type="datetime"
                  :placeholder="item.placeholder || ''"
                  :value-format="item.valueFormat"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <!-- 时间范围选择器 -->
            <el-col :span="8" v-if="item.type === 'daterange'">
              <el-form-item
                :label="item.label"
                :prop="'group.' + objIndex + '.' + item.prop"
                :rules="item.rules || []"
              >
                <el-date-picker
                  v-model="obj[item.prop]"
                  type="daterange"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始时间"
                  :placeholder="item.placeholder || ''"
                  :value-format="item.valueFormat"
                  end-placeholder="结束时间"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <!-- 文本域 -->
            <el-col :span="24" v-if="item.type === 'textarea'">
              <el-form-item
                :label="item.label"
                :prop="'group.' + objIndex + '.' + item.prop"
                :rules="item.rules || []"
              >
                <el-input
                  v-model="obj[item.prop]"
                  :placeholder="item.placeholder || ''"
                  type="textarea"
                  :maxlength="item.maxlength || null"
                  show-word-limit
                />
              </el-form-item>
            </el-col>
          </template>
        </el-row>
      </div>
    </el-form>
    <el-button @click="submit">提交</el-button>
    <el-button @click="submit1">提交1</el-button>
    <el-button @click="add">新增</el-button>
  </div>
</template>
<script setup lang="ts">
import { onBeforeMount, onMounted, reactive, ref } from "vue";
import { Delete } from "@element-plus/icons-vue";
import { ElMessageBox, ElMessage } from "element-plus";
const emits = defineEmits([]);
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  formConfig: {
    type: Array,
    required: true,
    default: () => [],
  },
});
const state = reactive({});
let formValue = reactive({
  group: [],
});

const formRef = ref(null);
const add = () => {
  formValue.group.push({});
};
const deleteFun = (index) => {
  ElMessageBox.confirm("确认删除该项吗？", "警告", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      formValue.group.splice(index, 1);
    })
    .catch(() => {});
};
const submit = () => {
  return new Promise((resolve, reject) => {
    formRef.value.validate((valid) => {
      if (valid) {
        resolve(formValue.group);
      } else {
        reject("校验失败");
      }
    });
  });
};
const submit1 = () => {
  submit().then((res) => {
    console.log(res, "rseresesresresrer");
  });
};
onBeforeMount(() => {});
onMounted(() => {});


// const formConfig = ref([
//   {
//     label: "事宜",
//     prop: "thing",
//     type: "input",
//     placeholder: "请输入事宜",
//   },
//   {
//     label: "销售预算",
//     prop: "salesBudget",
//     type: "select",
//     placeholder: "请选择销售预算",
//     options: [
//       {
//         value: "Option1",
//         label: "Option1",
//       },
//       {
//         value: "Option2",
//         label: "Option2",
//       },
//       {
//         value: "Option3",
//         label: "Option3",
//       },
//       {
//         value: "Option4",
//         label: "Option4",
//       },
//       {
//         value: "Option5",
//         label: "Option5",
//       },
//     ],
//     rules: [
//       {
//         required: true,
//         message: "请选择",
//         trigger: "change",
//       },
//     ],
//   },
//   {
//     label: "时间",
//     prop: "time",
//     type: "datePicker",
//     placeholder: "请选择时间",
//     valueFormat: "YYYY-MM-DD HH:mm:ss",
//     rules: [
//       {
//         required: true,
//         message: "请输入",
//         trigger: "blur",
//       },
//     ],
//   },
//   {
//     label: "详细描述",
//     prop: "description",
//     type: "textarea",
//     placeholder: "请输入详细描述",
//     maxlength: 200,
//     rules: [
//       {
//         required: true,
//         message: "请输入",
//         trigger: "blur",
//       },
//     ],
//   },
//   {
//     label: "时间范围",
//     prop: "superVisionTime",
//     type: "daterange",
   
//     placeholder: "请选择时间范围",
//     valueFormat: "YYYY-MM-DD",
//     rules: [
//       {
//         required: true,
//         message: "请选择",
//         trigger: "change",
//       },
//     ],
//   },
// ]);





defineExpose({ submit, add });
</script>
<style lang="scss" scoped>
.blueBox {
  width: 3px;
  height: 22px;
  background: #436ff6;
  border-radius: 0px 2px 2px 0px;
  position: absolute;
  left: 0;
}
.supervision-box {
  background: #fff;
  padding: 20px;
  position: relative;
  border-radius: 10px;
  margin-bottom: 20px;
}

.supervisionDialogTitle {
  color: #1e222a;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 10px;
}
</style>
